﻿<template>
  <div class="app-container">
    <div class="filter-title">
      <el-form label-position="right"
               label-width="90px">
        <el-form-item :label="$t('video.name')+' :'">
          <el-input v-model="listQuery.name"
                    style="width: 150px"
                    class="filter-item"
                    :placeholder="$t('video.name')"
                    @keyup.enter.native="handleFilter"></el-input>
        </el-form-item>
        <el-form-item :label="$t('video.adName')+' :'">
          <el-input v-model="listQuery.ad_name"
                    style="width: 150px"
                    class="filter-item"
                    :placeholder="$t('video.adName')"
                    @keyup.enter.native="handleFilter"></el-input>
        </el-form-item>
        <el-form-item :label="$t('public.trade')+' :'">
          <el-input v-model="listQuery.trade_name"
                    style="width: 150px"
                    class="filter-item"
                    :placeholder="$t('public.trade')"
                    @keyup.enter.native="handleFilter"></el-input>
        </el-form-item>
        <el-button class="filter-item"
                   type="primary"
                   icon="el-icon-search"
                   style="margin-left:20px"
                   @click="handleFilter">{{ $t('table.search') }}</el-button>
        <el-button style="margin-left: 10px"
                   class="filter-item"
                   type="primary"
                   @click="handleRefresh">{{ $t('table.refresh') }}</el-button>
        <div v-show="!showSearchItem"
             class="showDown"
             @click="showSearchItem = true">
          <i class="el-icon-d-arrow-right"></i>
        </div>
        <div v-show="showSearchItem"
             class="showUp"
             @click="showSearchItem = false">
          <i class="el-icon-d-arrow-left"></i>
        </div>
      </el-form>
    </div>
    <div v-show="showSearchItem"
         class="filter-container">
      <el-form label-position="right"
               label-width="90px">
        <el-form-item :label="$t('public.linkman')+' :'">
          <el-input v-model="listQuery.region_name"
                    style="width: 150px"
                    class="filter-item"
                    :placeholder="$t('public.linkman')"
                    @keyup.enter.native="handleFilter"></el-input>
        </el-form-item>
        <el-form-item :label="$t('video.uploadTime')+' :'">
          <div class="filter-item">
            <el-date-picker v-model="listQuery.startUploadTime"
                            :picker-options="pickerOptionsB"
                            type="date"
                            :placeholder="$t('video.startUploadTime')"
                            value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </div>
          <div class="filter-item">
            <el-date-picker v-model="listQuery.endUploadTime"
                            :picker-options="pickerOptionsE"
                            type="date"
                            :placeholder="$t('video.endUploadTime')"
                            value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item :label="$t('public.checkStatus')+' :'">
          <el-select v-model="listQuery.status"
                     clearable
                     style="width: 150px"
                     class="filter-item"
                     :placeholder="$t('public.checkStatus')">
            <el-option v-for="item in statusOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-table :key="tableKey"
              v-loading="listLoading"
              :data="list"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255,255,255,0.2)"
              border
              fit
              highlight-current-row
              style="width: 100%min-height:1000px">
      <el-table-column fixed="left"
                       align="center"
                       :label="$t('table.id')"
                       width="65">
        <template slot-scope="scope">
          <span>{{ (listQuery.page-1)*listQuery.limit+scope.$index+1 }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       show-overflow-tooltip
                       :label="$t('video.name')">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       show-overflow-tooltip
                       :label="$t('video.preview')">
        <template slot-scope="scope">
          <el-button v-if="scope.row.url"
                     type="primary"
                     size="mini"
                     @click="handlePreview(scope.row)">{{ $t('table.preview') }}</el-button>
          <span v-else>无视频源</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       show-overflow-tooltip
                       :label="$t('video.preview')">
        <template slot-scope="scope">
          <span>{{ parseInt(scope.row.time_length) }}&nbsp;秒</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       :label="$t('video.adName')">
        <template slot-scope="scope">
          <span>{{ scope.row.ad_name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       :label="$t('public.trade')">
        <template slot-scope="scope">
          <span>{{ scope.row.trade_name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       :label="$t('public.region')">
        <template slot-scope="scope">
          <span>{{ scope.row.region_name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       :label="$t('public.checkStatus')">
        <template slot-scope="scope">
          <span :class="statusColor(scope.row.check_status)">{{ statusEsSecond(scope.row.check_status) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       :label="$t('video.status')">
        <template slot-scope="scope">
          <span>{{ vidioStatusEs(scope.row.status) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       show-overflow-tooltip
                       :label="$t('video.uploadTime')">
        <template slot-scope="scope">
          <span>{{ scope.row.upload_time }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       show-overflow-tooltip
                       :label="$t('public.rule')">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status===2"
                     type="primary"
                     size="mini"
                     @click="handleAddRule(scope.row, 'create')">{{ $t('table.add') }}</el-button>
          <el-button v-else
                     type="primary"
                     size="mini"
                     @click="handlereadRule(scope.row)">{{ $t('table.read') }}</el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right"
                       align="center"
                       :label="$t('table.actions')"
                       :width="operWidth"
                       class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary"
                     size="mini"
                     @click="handleRead(scope.row)">{{ $t('table.read') }}</el-button>
          <el-button v-if="scope.row.check_status === 1 && permission.disable"
                     type="danger"
                     size="mini"
                     @click="handleDisable(scope.row)">{{ $t('table.disable') }}</el-button>
          <el-button v-else-if="permission.disable"
                     type="success"
                     size="mini"
                     @click="handleEnable(scope.row)">{{ $t('table.enable') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background
                     :current-page="listQuery.page"
                     :page-sizes="[10,20,30,50]"
                     :page-size="listQuery.limit"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"></el-pagination>
    </div>
    <!-- 查看 -->
    <el-dialog :title="textMap[dialogStatus]"
               :visible.sync="dialogFormRead">
      <el-form :model="temp"
               label-position="right"
               label-width="40%"
               style="width: 400px margin-left:120px">
        <el-form-item :label="$t('video.code')+' :'">
          <span>{{ temp.code }}</span>
        </el-form-item>
        <el-form-item :label="$t('video.video')+' :'"
                      prop="url">
          <div>
            <li v-if="temp.url"
                class="videoCode">
              <!-- <span>{{   temp.url  }}</span> -->
              <el-button type="primary"
                         size="mini"
                         @click="visibleVideo = true">预览</el-button>
            </li>
          </div>
        </el-form-item>
        <el-form-item :label="$t('video.name')+' :'">
          <span>{{ temp.name }}</span>
        </el-form-item>
        <el-form-item :label="$t('video.adName')+' :'">
          <span>{{ temp.ad_name }}</span>
        </el-form-item>
        <el-form-item :label="$t('public.linkman')+' :'">
          <span>{{ temp.region_name }}</span>
        </el-form-item>
        <el-form-item :label="$t('public.trade')+' :'">
          <span>{{ temp.trade_name }}</span>
        </el-form-item>
        <el-form-item :label="$t('video.timeLength')+' :'">
          <span>{{ temp.time_length }} &nbsp;秒</span>
        </el-form-item>
        <el-form-item v-if="temp.video_ratio"
                      :label="$t('video.videoRatio')+' :'">
          <span>{{ temp.video_ratio }}</span>
        </el-form-item>
        <el-form-item v-if="temp.video_px"
                      :label="$t('video.videoPx')+' :'">
          <span>{{ temp.video_px }}</span>
        </el-form-item>
        <el-form-item :label="$t('video.producer')+' :'">
          <span>{{ temp.producer }}</span>
        </el-form-item>
        <el-form-item v-if="temp.describe"
                      :label="$t('video.describe')+' :'">
          <span>{{ temp.describe }}</span>
        </el-form-item>
        <el-form-item :label="$t('public.checkStatus')+' :'">
          <span>{{ statusEsSecond(temp.check_status) }}</span>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 查看视频规则列表 -->
    <el-dialog :title="textMap[dialogStatus]"
               :visible.sync="dialogRuleRead"
               width="950px">
      <el-form :model="temp"
               label-position="right"
               label-width="40%"
               style="width: 400px margin-left:120px">
        <div class="pops">
          <div class="popUp left">
            <span class="information-title">视频信息:</span>
            <el-form-item :label="$t('video.adName')+' :'">
              <span>{{ temp.ad_name }}</span>
            </el-form-item>
            <el-form-item :label="$t('video.video')+' :'"
                          prop="url">
              <li v-if="temp.url"
                  class="videoCode">
                <el-button type="primary"
                           size="mini"
                           @click="visibleVideo = true">预览</el-button>
              </li>
              <span v-else>无视频源</span>
            </el-form-item>
            <el-form-item :label="$t('video.name')+' :'">
              <span>{{ temp.name }}</span>
            </el-form-item>
            <el-form-item :label="$t('public.trade')+' :'">
              <span>{{ temp.trade_name }}</span>
            </el-form-item>
            <el-form-item :label="$t('public.linkman')+' :'">
              <span>{{ temp.region_name }}</span>
            </el-form-item>
            <el-form-item :label="$t('video.timeLength')+' :'">
              <span>{{ temp.time_length }}&nbsp;秒</span>
            </el-form-item>
            <el-form-item :label="$t('video.producer')+' :'">
              <span>{{ temp.producer }}</span>
            </el-form-item>
            <el-form-item v-if="temp.describe"
                          :label="$t('video.describe')+' :'">
              <span>{{ temp.describe }}</span>
            </el-form-item>
          </div>
          <div class="popUp right">
            <div style="width:20%;text-align:right">
              <span class="information-title">发布规则:</span>
            </div>
            <el-form-item v-for="(item, index) in temp.rule"
                          :key="index"
                          :label="$t('public.rule')+' :'">
              <span>{{ item.name }} ( {{ statusEsSecond(item.check_status) }} )</span>
              <el-button style="margin-left:10px;"
                         type="primary"
                         size="mini"
                         @click="handleDetails(item)">详情</el-button>
            </el-form-item>
            <div style="text-align:center">
              <el-button v-if="temp.check_status !== 3"
                         type="primary"
                         size="mini"
                         @click="handleAddRule(temp, 'create')">添加更多规则</el-button>
            </div>
          </div>
        </div>
      </el-form>
    </el-dialog>
    <!-- 视频预览 -->
    <el-dialog ref="video"
               title="视频源"
               :model="temp"
               :visible.sync="visibleVideo"
               width="30%"
               :before-close="beforeVideoClose">
      <video v-if="temp.url !='' && temp.video_type == 1"
             id="video"
             :src="temp.url"
             width="100%"
             height="auto"
             controls="controls">您的浏览器不支持视频播放</video>
      <img v-else-if="temp.url !=''"
           :src="temp.url"
           style="width:100%;height:auto" />
    </el-dialog>
    <!-- 查看规则详情 -->
    <el-dialog :title="textMap[dialogStatus]"
               :visible.sync="dialogRuleDetails"
               width="950px">
      <el-form label-position="right"
               label-width="120px"
               size="small">
        <div class="pops">
          <div class="popUp left">
            <div style="width:120px;text-align:right">
              <span class="information-title">基础规则:</span>
            </div>
            <el-form-item :label="$t('rule.name')+' :'">
              <span>{{ datail.name }}</span>
            </el-form-item>
            <el-form-item :label="$t('rule.adName')+' :'">
              <span>{{ datail.ad_name }}</span>
            </el-form-item>
            <el-form-item :label="$t('rule.data')+' :'">
              <span>{{ getData(datail.start_time) }}&nbsp;至&nbsp;{{ getData(datail.end_time) }}</span>
            </el-form-item>
            <el-form-item :label="$t('rule.time')+' :'">
              <span>{{ getRuleTime(datail.play_time) }}</span>
            </el-form-item>
            <el-form-item :label="$t('public.region')+' :'">
              <span>{{ datail.region_name }}</span>
            </el-form-item>
            <el-form-item :label="$t('rule.playlimit')+' :'">
              <span>{{ datail.play_limit }}</span>
            </el-form-item>
            <el-form-item :label="$t('rule.adWord')+' :'">
              <span v-if="datail.ad_word">{{ datail.ad_word }}</span>
              <span v-else>无广告词</span>
            </el-form-item>
            <el-form-item v-if="datail.describe"
                          :label="$t('rule.describe')+' :'">
              <span>{{ datail.describe }}</span>
            </el-form-item>
            <el-form-item v-if="datail.is_coupon===1"
                          :label="$t('rule.couponUrl')+' :'">
              <span>{{ datail.coupon_url }}</span>
            </el-form-item>
            <el-form-item v-if="datail.is_coupon===1 && datail.coupon_explain"
                          :label="$t('rule.couponExplain')+' :'">
              <span>{{ datail.coupon_explain }}</span>
            </el-form-item>
            <el-form-item v-if="datail.is_coupon===1"
                          :label="$t('rule.buyAward')+' :'">
              <span>{{ datail.buy_award }}</span>
            </el-form-item>
            <el-form-item v-if="datail.is_coupon===1"
                          :label="$t('rule.couponAward')+' :'">
              <span>{{ datail.coupon_award }}</span>
            </el-form-item>
            <el-form-item :label="$t('public.checkStatus')+' :'">
              <span>{{ statusEsSecond(datail.check_status) }}</span>
            </el-form-item>
            <el-form-item v-if="datail.check_status === 2"
                          :label="$t('public.auditOpinion')+' :'">
              <span>{{ datail.check_remark }}</span>
            </el-form-item>
          </div>
          <div class="popUp right">
            <span class="information-title">精准投放:</span>
            <el-form-item v-if="datail.timing"
                          :label="$t('rule.timing')+' :'">
              <span>{{ whetherEs(datail.timing) }}</span>
            </el-form-item>
            <el-form-item v-if="type !==3 && datail.trade_name"
                          :label="$t('public.trade')+' :'">
              <span>{{ datail.trade_name }}</span>
              <el-checkbox v-if="datail.trade_status===2"
                           v-model="datail.trade_status"
                           style="margin-left:10px"
                           :true-label="2"
                           :false-label="1"
                           disabled>排斥</el-checkbox>
            </el-form-item>

            <el-form-item v-if="datail.circle_classify_name"
                          :label="$t('rule.classifyName')+' :'">
              <span>{{ datail.circle_classify_name }}</span>
            </el-form-item>
            <el-form-item v-if="datail.circle_name"
                          :label="$t('rule.businessDistrict')+' :'">
              <span>{{ datail.circle_name }}</span>
            </el-form-item>
            <el-form-item v-if="datail.merchant_name"
                          :label="$t('rule.designatedMerchant')+' :'">
              <span>{{ datail.merchant_name }}</span>
            </el-form-item>
            <el-form-item v-if="datail.equipment_type_name"
                          :label="$t('equipment.type')+' :'">
              <span>{{ datail.equipment_type_name }}</span>
            </el-form-item>
            <el-form-item v-if="datail.equipment_name"
                          :label="$t('rule.equipmentCode')+' :'">
              <span>{{ datail.equipment_name }}</span>
            </el-form-item>
            <el-form-item v-if="datail.bidding>1"
                          :label="$t('rule.bidding')+' :'">
              <span>+{{ (datail.bidding-1).toFixed(1)*100 }}%</span>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer"
           class="dialog-footer"
           style="text-align: center;">
        <!-- <el-button @click="cancelAddRule">{{ $t('table.cancel') }}</el-button>
        <el-button type="primary" @click="cancelAddRule">{{ $t('table.confirm') }}</el-button>-->
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth"; // get token from cookie

export default {
  name: "Video",
  data() {
    return {
      type: "",
      showSearchItem: false,
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      statusOptions: [
        {
          value: 1,
          label: "视频审核中"
        },
        {
          value: 2,
          label: "规则待添加"
        },
        {
          value: 3,
          label: "规则待审核"
        },
        {
          value: 4,
          label: "发布中"
        },
        {
          value: 5,
          label: "发布中[规则审核]"
        },
        {
          value: 6,
          label: "发布结束"
        }
      ],
      listQuery: {
        page: 1,
        limit: 20,
        name: "",
        ad_name: "",
        trade_name: "",
        region_name: "",
        startUploadTime: "",
        endUploadTime: ""
      },
      temp: {
        id: undefined,
        name: "",
        ad_id: "",
        url: "",
        region_id: "",
        region_name: "",
        trade_id: "",
        producer: "",
        time_length: "",
        describe: ""
      },
      datail: {},
      dialogFormVisible: false,
      dialogFormRead: false,
      dialogRuleRead: false,
      dialogRuleDetails: false,
      dialogStatus: "",
      upLoading: false,
      visibleVideo: false,
      textMap: {
        update: "更新",
        create: "添加",
        review: "审核",
        read: "查看",
        readRule: "查看规则"
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        ad_id: [
          { required: true, message: "请填写广告主编号", trigger: "blur" }
        ],
        url: [{ required: true, message: "请填上传视频源", trigger: "change" }],
        region_id: [{ required: true, message: "请选择区域", trigger: "blur" }],
        trade_id: [{ required: true, message: "请选择行业", trigger: "blur" }],
        time_length: [
          { required: true, message: "请填写视频时长", trigger: "blur" }
        ],
        producer: [{ required: true, message: "制作单位", trigger: "blur" }],
        check_status: [{ required: true, message: "请审核", trigger: "change" }]
      },
      createDisabled: true,
      updateDisabled: true,
      loading: false,
      industryOptions: [],
      areaOptions: [],
      permission: {
        disable: false
      },
      pickerOptionsB: {
        // 限制时间
        // selectableRange: ['22:00:00 - 23:59:59','00:00:00 - 02:00:00'],
        // 限制日期
        disabledDate: this.disabledDateB
      },
      pickerOptionsE: {
        disabledDate: this.disabledDateE
      }
    };
  },
  computed: {
    operWidth: function() {
      let itemCount = 1;
      if (this.permission.disable) {
        itemCount += 1;
      }
      return itemCount * 80 + "px";
    }
  },
  created() {
    if (this.$store.state.permission.jurisdiction === "*") {
      this.permission.disable = true;
    } else {
      const jurisdiction = this.$store.state.permission.jurisdiction.split(",");
      jurisdiction.forEach(element => {
        const id = parseInt(element);
        if (id === 159) {
          this.permission.disable = true;
        }
      });
    }
    this.type = JSON.parse(getToken()).type;
    this.getList();
  },
  methods: {
    disabledDateB(time) {
      if (this.listQuery.endUploadTime) {
        return (
          time.getTime() >
          new Date(this.listQuery.endUploadTime).getTime() +
          24 * 3600 * 1000 -
          8.64e7
        );
      }
    },
    disabledDateE(time) {
      if (this.listQuery.startUploadTime) {
        return (
          time.getTime() <
          new Date(this.listQuery.startUploadTime).getTime() - 8.64e6
        );
      }
    },
    getList() {
      this.listLoading = true;
      const data = {
        rows: this.listQuery.limit,
        page: this.listQuery.page
      };
      if (this.listQuery.name) {
        data["name"] = this.listQuery.name;
      }
      if (this.listQuery.ad_name) {
        data["ad_name"] = this.listQuery.ad_name;
      }
      if (this.listQuery.trade_name) {
        data["trade_name"] = this.listQuery.trade_name;
      }
      if (this.listQuery.region_name) {
        data["region_name"] = this.listQuery.region_name;
      }

      if (this.listQuery.startUploadTime) {
        data["startUploadTime"] = this.listQuery.startUploadTime;
      }
      if (this.listQuery.endUploadTime) {
        const date = new Date(this.listQuery.endUploadTime);
        data["endUploadTime"] = this.timestampToTime(
          date.getTime() + (60 * 60 * 24 * 1000 - 1)
        );
      }
      if (this.listQuery.status || this.listQuery.status === 0) {
        data["status"] = this.listQuery.status;
      }
      const videoIndexPath = {
        // 获取视频源列表
        company: "STQ",
        api: "pc_AdVideo_index",
        version: "1.0",
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(videoIndexPath), res => {
        if (res) {
          this.socketData(res);
          this.listLoading = false;
        } else {
          this.$message.error(" 获取视频源列表失败 ");
          this.listLoading = false;
        }
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleDetails(row) {
      if (row.check_status === 0 || row.check_status === 2) {
        const getRuleDetailsPath = {
          company: "STQ",
          api: "pc_AdPlayRule_getRequestList",
          version: "1.0",
          data: {
            id: row.id
          }
        };
        this.socketApi.sendSock(JSON.stringify(getRuleDetailsPath), res => {
          if (res) {
            this.socketData(res);
          }
        });
      } else {
        const getRuleDetailsPath = {
          company: "STQ",
          api: "pc_AdPlayRule_getList",
          version: "1.0",
          data: {
            id: row.id
          }
        };
        this.socketApi.sendSock(JSON.stringify(getRuleDetailsPath), res => {
          if (res) {
            this.socketData(res);
          }
        });
      }
    },
    handleAddRule(row, status) {
      const sessionData = {
        id: row.id,
        name: row.name,
        dialogStatus: status
      };
      if (row.check_status || row.check_status === 0) {
        sessionData["check_status"] = row.check_status;
      }
      sessionStorage.setItem("session", JSON.stringify(sessionData));
      this.$router.push({
        name: "playRule/addRule"
      });
    },
    handlereadRule(row) {
      this.temp = Object.assign({}, row); // copy obj
      this.dialogStatus = "readRule";
      this.dialogRuleRead = true;
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        name: "",
        ad_id: "",
        url: "",
        region_id: "",
        region_name: "",
        trade_id: "",
        producer: "",
        time_length: "",
        describe: ""
      };
    },
    handleRefresh() {
      this.listQuery = {
        page: 1,
        limit: 20,
        name: "",
        ad_name: "",
        trade_name: "",
        region_name: "",
        startUploadTime: "",
        endUploadTime: ""
      };
      this.getList();
    },
    handleDisable(row) {
      const checkRulePath = {
        company: "STQ",
        api: "pc_AdVideo_editVideo",
        version: "1.0",
        data: {
          id: row.id,
          check_status: 3,
          returnType: "disable"
        }
      };
      this.socketApi.sendSock(JSON.stringify(checkRulePath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    handleEnable(row) {
      const checkRulePath = {
        company: "STQ",
        api: "pc_AdVideo_editVideo",
        version: "1.0",
        data: {
          id: row.id,
          check_status: 1,
          returnType: "enable"
        }
      };
      this.socketApi.sendSock(JSON.stringify(checkRulePath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    handleRead(row) {
      // 打开查看弹窗
      this.temp = Object.assign({}, row); // copy obj
      this.dialogStatus = "read";
      this.dialogFormRead = true;
    },
    handlePreview(row) {
      // 预览视频
      this.temp.url = row.url;
      this.temp.video_type = row.video_type;
      this.visibleVideo = true;
    },
    // 区域行业选择
    getIndustry(query) {
      const industryIndexPath = {
        company: "STQ",
        api: "pc_trade_index",
        version: "1.0",
        data: {
          name: query
        }
      };
      this.socketApi.sendSock(JSON.stringify(industryIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    getArea(query) {
      const areaIndexPath = {
        company: "STQ",
        api: "pc_region_index",
        version: "1.0",
        data: {
          name: query
        }
      };
      this.socketApi.sendSock(JSON.stringify(areaIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "pc_AdVideo_index") {
            // 获取视频源列表
            this.total = resj.count;
            this.list = resj.data;
          } else if (
            resj.api === "pc_AdVideo_editVideo" &&
            resj.type === "enable"
          ) {
            // 视频源编辑、审核
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "启用成功",
              type: "success",
              duration: 2000
            });
          } else if (
            resj.api === "pc_AdVideo_editVideo" &&
            resj.type === "disable"
          ) {
            // 视频源编辑、审核
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "禁用成功",
              type: "success",
              duration: 2000
            });
          } else if (resj.api === "pc_AdVideo_addVideo") {
            // 视频源添加
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "添加成功",
              type: "success",
              duration: 2000
            });
          } else if (resj.api === "pc_AdVideo_deleteVideo") {
            // 视频源删除
            this.getList();
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          } else if (resj.api === "pc_region_index") {
            // 地区模糊查询
            this.areaOptions = resj.data;
          } else if (resj.api === "pc_trade_index") {
            // 行业模糊查询
            this.industryOptions = resj.data;
          } else if (
            resj.api === "pc_AdPlayRule_getList" ||
            resj.api === "pc_AdPlayRule_getRequestList"
          ) {
            // 获取规则信息
            this.datail = Object.assign({}, resj.data[0]); // copy obj
            this.datail.play_time = JSON.parse(this.datail.play_time);
            this.datail.data = [this.datail.start_time, this.datail.end_time];
            this.dialogRuleDetails = true;
          }
        }
      }
    },
    // 视频预览窗口关闭
    beforeVideoClose(done) {
      if (parseInt(this.temp.video_type) === 1) {
        var audio = document.querySelector("#video");
        audio.pause();
        audio.currentTime = 0;
      }
      done();
    },
    // 时间转换
    getData(data) {
      var date = new Date(data);
      var Y = date.getFullYear();
      var M = date.getMonth() + 1;
      var D = date.getDate();
      return Y + "-" + M + "-" + D;
    },
    getRuleTime(data) {
      if (data) {
        const time = [];
        data.forEach(res => {
          time.push(res.start + "-" + res.end);
        });
        return time.join(",");
      }
    }
  }
};
</script>
